<template>
  <div id="aplayer"></div>
</template>

<script>
import { urls, lyric } from "../api/music/music";
// import "APlayer/dist/APlayer.min.css";
// import APlayer from "APlayer";
export default {
  data() {
    return {
      name: "",
      artist: "",
      url: "",
      cover: "",
      songSingle: [],

      newsong: "",
    };
  },
  created() {},
  mounted() {
    this.vide();
  },
  methods: {
    vide() {
      if (this.songSingle.length > 0) {
        this.newsong = new APlayer({
          container: document.getElementById("aplayer"),
          fixed: true,
          lrcType: 1,
          audio: this.songSingle,
        });
      }
    },
  },
  computed: {
    ur() {
      return this.$store.state.musicUrls;
    },
  },
  watch: {
    ur: {
      handler: function (a) {
        if (a) {
          urls({ id: a.id }).then((v) => {
            let u = v.data;
            lyric({ id: u[0].id }).then((s) => {
              this.songSingle.unshift({
                name: a.name, // 音频名称
                artist: a.song.artists[0].name, //音频艺术家
                url: v.data[0].url, // 	音频链接
                cover: a.picUrl, //音频封面
                lrc: s.lrc.lyric,
              });
              this.vide();
              this.newsong.play();
            });
          });
        }
      },
      deep: true,
      //   immediate: true,
    },
  },
};
</script>

<style lang="scss">
.aplayer.aplayer-fixed .aplayer-body {
  bottom: 50px !important;
  width: 96% !important;
}
#aplayer .aplayer-list {
  margin-bottom: 115px !important;
}
#aplayer .aplayer-lrc {
  z-index: 999999999999999999999999999999999999999999 !important;
  bottom: 135px !important;
}
</style>